import { defineComponent, ref } from 'vue';
import { Button, Popover } from 'ant-design-vue';
import modeler from '/@/store/modules/bpmnModeler';
import { useI18n } from '/@/hooks/web/useI18n';
import { Icon } from '/@/components/Icon';

const Imports = defineComponent({
  name: 'Imports',
  setup() {
    const { t } = useI18n();
    const modelerStore = modeler();
    const importRef = ref<HTMLInputElement | null>(null);

    const openImportWindow = () => {
      importRef.value && importRef.value.click();
    };

    const changeImportFile = () => {
      if (importRef.value && importRef.value.files) {
        const file = importRef.value.files[0];
        const reader = new FileReader();
        reader.readAsText(file);
        reader.onload = function () {
          const xmlStr = this.result;
          modelerStore.getModeler!.importXML(xmlStr as string);
        };
        importRef.value.value = '';
        importRef.value.files = null;
      }
    };

    return () => (
      <div className="hl-group-item" onClick={openImportWindow}>
        <Popover content={t('routes.bpmn.openFile')}>
          {/* <Icon icon="ph:folder-open" /> */}
          <Button type="link">
            <Icon icon="bi:download" />
            导入
          </Button>
        </Popover>
        <input
          type="file"
          ref={importRef}
          style="display: none"
          accept=".xml,.bpmn"
          onChange={changeImportFile}
        />
      </div>
    );
  },
});

export default Imports;
